<template>
  <div>
    <!-- 实时业务 -->
    <a-card :bordered="false" size="small" title="发起业务">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" ref="form">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="交易类型" :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                <a-radio-group v-decorator="tranType" @change="tranTypeChange">
                  <a-radio :value="1"> 实时代收 </a-radio>
                  <a-radio :value="2"> 实时代付 </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="发报日期" :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                {{ formModel.consignDate }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="交易序号" :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                {{ formModel.txssNo }}
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="发起渠道" :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                {{ formModel.oprtSourceName }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                <a-button :style="{ marginLeft: '8px' }" @click="addClick" type="primary" icon="plus"
                  >新增录入</a-button
                >
                <a-button :style="{ marginLeft: '8px' }" @click="handleReset"> 重置 </a-button>
              </a-form-item>
            </a-col>
          </a-row>
          <!-- 付款人信息 -->
          <a-card size="small" class="payAccountInfo" title="付款方信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="付款人账号" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请输入付款人账号" v-decorator="payerAcc"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="付款人名称" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请输入付款人名称" v-decorator="payerAccName"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="付款行名称" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-select
                    v-decorator="payerBankName"
                    placeholder="请选择银行"
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    @change="payerBankChange"
                  >
                    <a-select-option value="jack"> Jack </a-select-option>
                    <a-select-option value="lucy"> Lucy </a-select-option>
                    <a-select-option value="tom"> Tom </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="付款行行号" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input readOnly v-decorator="payerBankNo"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <!-- 收款人信息 -->
          <a-card size="small" class="collectAccountInfo" title="收款方信息">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="收款人账号" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请输入收款人账号" v-decorator="recipientAcc"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="收款人名称" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请输入收款人名称" v-decorator="recipientAccName"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="收款行名称" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请搜索行名" v-decorator="recipientBankName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="收款行行号" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input placeholder="请搜索行号" readOnly v-decorator="recipientBankNo"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card>
            <a-row :gutter="24">
              <a-col :span="10">
                <a-form-item label="金额" :labelCol="{ span: 2, offset: 2 }" :wrapperCol="{ span: 2 }">
                  <a-input
                    prefix="￥:"
                    :suffix="formatAmount"
                    :maxLength="maxLength"
                    @change="amountChange"
                    v-decorator="amount"
                    placeholder="请输入金额(单位：元)"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item label="" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-input v-model="maxAmount" readOnly placeholder="金额大写转换" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="附言" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                  <a-textarea :rows="3" v-decorator="remarks" placeholder="请输入附言" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { moneyFormat, rmoney, convertCurrency } from '@/utils/util'

export default {
  name: 'RealtimeBusiness',
  data() {
    return {
      form: this.$form.createForm(this, { name: 'form_rule' }),

      tranType: ['tranType', { rules: [{ required: true, message: '请选择交易类型！' }], initialValue: 1 }],
      payerAcc: ['payerAcc', { rules: [{ required: true }] }],
      payerAccName: ['payerAccName', { rules: [{ required: true }] }],
      recipientAcc: ['recipientAcc', { rules: [{ required: true }] }],
      recipientAccName: ['recipientAccName', { rules: [{ required: true }] }],
      payerBankName: ['payerBankName', { rules: [{ required: true }] }],
      payerBankNo: ['payerBankNo', { rules: [{ required: true }] }],
      recipientBankName: ['recipientBankName', { rules: [{ required: true }] }],
      recipientBankNo: ['recipientBankNo', { rules: [{ required: true }] }],
      amount: ['amount', { rules: [{ required: true }] }, { validator: [/^([0-9]{1}[0-9]*\.{0,1}\d{0,2})?$/] }],
      remarks: ['remarks', { rules: [{ required: false }] }],

      // 发起信息(请求后台查询)
      formModel: {
        consignDate: '', // 发报日期
        txssNo: '', // 交易序号
        oprtSourceName: '', // 发起渠道
      },
      // 金额会计格式
      formatAmount: '',
      // 金额大写
      maxAmount: '',
      // 金额最大输入值
      maxLength: 15,
    }
  },
  computed: {},
  created() {
    this.form.getFieldsValue(['tranType']) // 获取某一个值
    this.form.getFieldsValue() // 获取所有值
  },
  methods: {
    moment,
    // 点击新增录入提交录入信息
    addClick() {
      this.form.validateFields((err, fieldsValue) => {
        // 校验所有的值
        if (!err) {
          console.log(fieldsValue) //获取数据 {password: "实际值", username: "实际值"}
          /* console.info(JSON.parse(JSON.stringify(this.model)))
          console.info(Object.assign({}, this.model)) */
        } else {
          console.log(err)
        }
      })
      this.form.validateFields(['password'], (err, fieldsValue) => {
        // 校验某个值
        if (!err) {
          console.log(fieldsValue) //获取数据  {password: "实际值"}
        } else {
          console.log(err)
        }
      })
    },
    handleReset() {
      this.form.resetFields() // 重置表单值
      this.formatAmount = null
      this.maxAmount = null
    },
    // 交易类型改变触发
    tranTypeChange(e) {
      console.log('radio checked', e.target.value)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    payerBankChange(e) {
      console.log(e)
      this.form.setFieldsValue({ payerBankNo: e })
    },
    // 金额文本框改变触发
    amountChange(e) {
      this.formatAmount = moneyFormat(e.target.value, 4, '.', ',')
      this.maxAmount = convertCurrency(e.target.value)
    },
  },
}
</script>

<style scoped lang="less">
@import '../../style/index.less';
/deep/ .table-page-search-wrapper {
  .ant-card {
    margin-top: 10px;
  }
  .payAccountInfo {
    .ant-card-head {
      background-color: #e5fff3;
    }
  }
  .collectAccountInfo {
    .ant-card-head {
      background-color: #fcebdd;
    }
  }
  .ant-input-affix-wrapper .ant-input:not(:last-child) {
    padding-right: 300px;
  }
  .ant-input-affix-wrapper .ant-input-suffix {
    color: red;
    font-size: 17px;
    font-weight: bold;
  }
}
</style>
